<template>
  <div class="sales-attributes">
    <div v-if="!isDisabled" class="header">
      <el-button size="mini" type="primary" round @click="saveData">
        {{ isChange || !(listDisplay.JD_channel || listDisplay.WMDJ_channel) ? '保存' : '下一步' }}
      </el-button>
    </div>
    <h4>目前销售属性排序如下：您可以拖拽调整顺序。然后保存</h4>
    <table cellpadding="10px">
      <tbody>
        <tr v-for="attItem in attItemFilter(value)" :key="attItem.attrName">
          <td class="text-does-not-wrap">销售属性：</td>
          <td class="text-does-not-wrap attrName">{{ attItem.attrName }}</td>
          <td>
            <draggable v-model="attItem.aliasList" :disabled="isDisabled" class="draggable" animation="300" :move="onMove" @end="end">
              <el-tag v-for="(e, i) in attItem.aliasList" :key="i" :type="e.frozenFlag === 1 ? 'danger' : ''" class="attrItem">{{ e.valueAlias }}</el-tag>
            </draggable>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { setSpuSaleAttrSort } from '@/api/coi/onlineTaskAPI/spu'
import { setSpuSaleAttrSort as setSpuSaleAttrSort_edit } from '@/api/coi/onlineTaskAPI/spuEdit'

export default {
  name: 'SalesAttributes',
  components: { draggable },
  props: {
    value: {
      type: Array,
      required: true
    },
    listDisplay: {
      type: Object,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    increased: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isChange: false
    }
  },
  methods: {
    attItemFilter(item) {
      return item.filter((_) => _.attrName && Array.isArray(_.aliasList) && _.aliasList.length)
    },
    end() {
      this.isChange = true
    },
    onMove(e) {
      if (e.relatedContext.element.frozenFlag === 1 || e.draggedContext.element.frozenFlag === 1) return false
      return true
    },
    saveData() {
      if (!this.isChange && this.listDisplay.JD_channel) return this.$emit('changeTag', 'JD_channel')
      if (!this.isChange && this.listDisplay.WMDJ_channel) return this.$emit('changeTag', 'WMDJ_channel')
      this.$confirm('提交spu销售属性排序, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(this.sava)
        .catch(() => {})
    },
    transData() {
      const key = this.increased ? 'spuId' : 'chgSpuId'
      const queryData = {
        [key]: this.$route.params.spuId - 0
      }
      const data = JSON.parse(JSON.stringify(this.value))
      if (Array.isArray(data)) {
        data.forEach((_) => {
          if (!Array.isArray(_.aliasList)) _.aliasList = []
          _.aliasList.forEach((i, index) => {
            i.orderSort = index
          })
          queryData[_.attrNameKey] = _.attrName
          queryData[_.aliasListKey] = _.aliasList
        })
      }
      return queryData
    },
    async sava() {
      try {
        this.$emit('changeLoading', true)
        const fun = this.increased ? setSpuSaleAttrSort : setSpuSaleAttrSort_edit
        const { code } = await fun(this.transData())
        if (code !== '0') return
        this.$message({
          type: 'success',
          message: '保存成功！'
        })
        this.$emit('refresh', 'JD_channel')
      } catch (e) {
        console.log(e)
      } finally {
        this.$emit('changeLoading', false)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.sales-attributes {
  margin: 0 12px;
  .header {
    text-align: right;
    margin-bottom: 10px;
  }
  table {
    border-collapse: collapse;
    border-collapse: separate;
    tr {
      td {
        border-bottom: 1px double #eee;
      }
      &:last-child {
        td {
          border-bottom: none;
        }
      }
      .attrName {
        font-weight: 700;
      }
      .attrItem {
        margin: 5px;
        cursor: move;
      }
    }
  }
}

.text-does-not-wrap {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
